<template>
	<div class="settings-general">
		<div class="flex max-md:flex-col p-5 bg-bg-1 rounded-lg">
			<div class="flex flex-col flex-auto">
				<AccountInfo :userInfo="userInfo" />
				<base-ellipsis
					class="self-start mt-3 text-sm text-t-3 cursor-pointer"
					:line-clamp="3"
					:text="signature"
					@click="handleProfile" />
			</div>
			<base-button
				class="self-center max-md:mt-5"
				type="primary"
				:block="false"
				textT="settings.general.editProfile"
				@click="handleProfile" />
		</div>

		<div class="h-group-t-big" />
		<div class="grid gap-x-5 gap-y-[10px] grid-cols-1 sm:grid-cols-2">
			<KycEmail />
			<KycMobile />
		</div>
		<BaseTip class="mt-4">
			<i18n-t keypath="settings.kyc.tip" scope="global">
				<span class="app-text-link text-primary" @click="customerService">
					{{ $t('app.waiter') }}
				</span>
			</i18n-t>
		</BaseTip>
	</div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { AccountInfo } from '@/components/account'
import { BaseButton, BaseEllipsis, BaseTip } from '@/components/base'
import { useProfileStore } from '@/store'
import { customerService, t } from '@/utils'
import KycEmail from '@/views/settings/verify/kyc-email.vue'
import KycMobile from '@/views/settings/verify/kyc-mobile.vue'
import { ViewType } from '@/views/profile/profile/types.ts'

const profileStore = useProfileStore()
const userInfo = computed(() => profileStore.userInfo)
const signature = computed(
	() => profileStore.userInfo?.signature || t('profile.signaturePlaceholder')
)

const handleProfile = () => {
	profileStore.showProfile({ show: true, viewType: ViewType.edit })
}
</script>

<style scoped></style>
